<template>
    <div class="home-swipe">
        <van-search v-model="search" placeholder="请输入搜索关键词" input-align="center" @search="onSearch" @focus="onFocus"/>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in bannerData" :key="index">
                <van-image  :src="item.picUrl" lazy-load radius="20"/>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { Toast } from 'vant';
//import axios from "axios";
export default {
    data() {
        return {
            search:'',
            bannerData:[]
        };
    },
    methods: {
        //完成一个方法，实现网络请求轮播数据的功能
        getBanner(){
            this.$request('get','/recommend/banner')
              .then(res =>{
                console.log(res);
                this.bannerData = res.data;
                console.log(this.bannerData)
              })
        },
        onSearch(val){
            Toast(val);
        },
    },
    created(){
        //页面还没有渲染，目前还不...
        this.getBanner();
    },
    mounted(){
        //页面...
        //this.getBanner();
    }
};
</script>
<style scoped>
  /*.my-swipe .van-swipe-item {
    width: 100%;
  }*/
</style>